import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Col, notification, Row, Switch, Table } from 'antd';
import { Link } from 'umi';
import routes from '@/routes';
import { PlusOutlined, SettingOutlined } from '@ant-design/icons/lib';
import React from 'react';
import { useRequest } from 'ahooks';
import { ApiResult } from '@/services/ApiResult';
import { PageResult } from '@/services/PageResult';
import { ServerDto } from '@/services/dto/ServerDto';
import { USER_KEY } from '@/services/dto/UserDto';
import { history } from '@@/core/history';
import { uuid } from '@/utils/utils';

export default (props: any) => {


  const defaultPageSize = process.env.NODE_ENV === 'development' ? 2 : 10;

  const pageResult = useRequest<{ list: [], total: number }>(({ current, pageSize }) => {
      return ({
        url: `${routes.apiRoutes.serverPage.url}?pageNo=${current}&pageSize=${pageSize}`,
        method: routes.apiRoutes.serverPage.method,
        headers: {
          access_token: localStorage.getItem(USER_KEY.ACCESS_TOKEN),
        },
      });
    },
    {
      formatResult: (res: any) => ({
        list: res?.result?.data,
        total: res?.result?.total,
      }),
      manual: false,
      paginated: true,
      refreshOnWindowFocus: false,
      defaultPageSize,
    });


  const updateServerUseRequest = useRequest(
    (payload) => {
      return ({
        ...routes.apiRoutes.serverUpdateMonitor,
        data: payload,
      });
    },
    {
      manual: true,
      onSuccess: (data, params) => {
        if (data.code !== 1) {
          notification.error({
            message: `请求错误 ${data.code}: ${routes.apiRoutes.serverUpdate.url}`,
            description: data.desc,
          });
          return;
        }
        notification.success({
          message: `服务器：${params[0]?.name}`,
          description: '操作成功',
        });
      },
    });

  const columns = [
    {
      title: '服务器名称',
      dataIndex: 'name',
    },
    {
      title: '服务器实例id',
      dataIndex: 'instanceId',
      key: 'instanceId',
    },
    {
      title: '是否开启监控',
      dataIndex: 'isMonitor',
      key: 'instanceId',
      render: (_: any, record: ServerDto) => {
        return <Switch checkedChildren="开启"
                       unCheckedChildren="关闭"
                       defaultChecked={record.isMonitor}
                       onChange={(checked) => {
                         updateServerUseRequest.run({ id: record.id, isMonitor: checked, name: record.name });
                       }}
        />;
      }
      ,
    },
  ];
  return (
    <PageHeaderWrapper>
      {/*      <Row justify={'end'} style={{ backgroundColor: '#ffffff'}}>
        <Col style={{padding: '10px'}}>
          <Link to={routes.pageRoutes.projectCreate}><PlusOutlined/> 添加Ecs</Link>
        </Col>
      </Row>*/}
      <Table dataSource={pageResult?.data?.list} columns={columns} pagination={{
        position: ['topRight', 'bottomRight'],
        defaultPageSize,
        defaultCurrent: 1,
        showSizeChanger: true,
        total: pageResult?.data?.total,
        onChange: (current) => {
          pageResult.params[0].current = current;
          pageResult.run(pageResult.params[0]);
        },
        onShowSizeChange: (current, pageSize) => {
          pageResult.params[0].current = current;
          pageResult.params[0].pageSize = pageSize;
          pageResult.run(pageResult.params[0]);
        },
      }}/>
    </PageHeaderWrapper>
  );
}
